﻿<template>
	<div class="vehicle-container">
		<el-dialog v-model="isShowDialog" width="100%"  draggable="" :close-on-click-modal="false" style="text-align: center;height: 90%;">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<table style="width:100%;  border: 1ch;margin-bottom: 30px;background-color: aqua;">
				<tr>
					<td>用户名</td>
					<td>用户电话</td>
					<td>短信通知开关</td>
					<td>备注</td>
					<td>操作人员</td>
				</tr>
				<tr>
					<td>{{ ruleForm. peopleIdOccupantName}}</td>
					<td>{{ ruleForm. occupantPhone}}</td>
					<td>无</td>
					<td>无</td>
				</tr>
			</table>
			<table style="width:100%;border: 1ch;margin-bottom: 30px;background-color:chartreuse;">
				<tr style="border: 3px solid #fff;">
					<td>序号</td>
					<td>车牌号</td>
					<td>车辆类型</td>
					<td>车辆颜色</td>
					<td>车辆证件</td>
					<td>用户卡号</td>
				</tr>
				<tr>
					<td>{{ ruleForm.id }}</td>
					<td>{{ ruleForm.vehicleNo }}</td>
					<td>{{ ruleForm.vehicleModel }}</td>
					<td>{{ ruleForm.vehicleColor }}</td>
					<td>{{ ruleForm.vehicleCard }}</td>
					<td>{{ ruleForm.occupantNo.substring(0, 8) + "***" + ruleForm.occupantNo.substring(ruleForm.occupantNo.length - 4) }}</td>
				</tr>
			</table>
			<table style="width:100%;background-color: darkorange;">
				<tr>
					<td>序号</td>
					<td>车位编号</td>
					<td>所属区域</td>
					<td>运营模式</td>
					<td>费用(元)</td>
					<td>车位状态</td>
					<td>有效期限</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>{{ ruleForm.id }}</td>
					<td>{{ ruleForm.carNo }}</td>
					<td>{{ ruleForm.communityName }}</td>
					<td>{{ ruleForm. operation}}</td>
					<td>{{ ruleForm.stopCarMoney}}</td>
					<td>{{ ruleForm.carState==1?'有效':'无效'}}</td>
					<td>{{ ruleForm.occupantExpirationTime}}</td>
				</tr>
			</table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
	import { ref,onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
  	import { formatDate } from '/@/utils/formatTime';
	import { addVehicle, updateVehicle, detailVehicle } from "/@/api/parking/vehicle";
	import { getOccupantAuditPeopleIdDropdown } from '/@/api/parking/vehicle';
	import { getStallStallIdDropdown } from '/@/api/parking/vehicle';

	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	// 页面加载时
	onMounted(() => {

	});

	// 打开弹窗
	const openDialog = async (row: any) => {
		// ruleForm.value = JSON.parse(JSON.stringify(row));
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
			ruleForm.value = (await detailVehicle(rowData.id)).data.result;
		else
			ruleForm.value = rowData;
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = ruleForm.value;
				if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
					await addVehicle(values);
				} else {
					await updateVehicle(values);
				}
				closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	};

	const occupantAuditPeopleIdDropdownList = ref<any>([]); 
	const getOccupantAuditPeopleIdDropdownList = async () => {
		let list = await getOccupantAuditPeopleIdDropdown();
		occupantAuditPeopleIdDropdownList.value = list.data.result ?? [];
	};
	getOccupantAuditPeopleIdDropdownList();
	
	const stallStallIdDropdownList = ref<any>([]); 
	const getStallStallIdDropdownList = async () => {
		let list = await getStallStallIdDropdown();
		stallStallIdDropdownList.value = list.data.result ?? [];
	};
	getStallStallIdDropdownList();
	





	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




